import React from 'react';
import ReactEcharts from '@/components/Echarts';

const PortrayalBar = props => {
    const { data = [], organization } = props;
    const { postList = [], postRankCount } = data;
    const isChinaArea = organization.area === 'cn';
    const xAxisData = postList.map(({ postName }) => postName);
    const allPostRank = [];
    if (postRankCount) {
        postRankCount.forEach(item => {
            if (item.name) {
                allPostRank.push(item.name);
            }
        });
    }
    allPostRank.sort((a, b) => parseInt(a.slice(1), 10) - parseInt(b.slice(1), 10));
    const flattenChildren = children => {
        const result = {};
        allPostRank.forEach(postRank => {
            result[postRank] = 0;
        });
        if (children) {
            children.forEach(element => {
                result[element.name] = element.value;
            });
        }
        return result;
    };
    const allData = {};
    if (allPostRank.length > 0) {
        allPostRank.forEach(postRank => {
            allData[postRank] = postList.map(item => flattenChildren(item.children)[postRank]);
        });
    }
    const getRotateDegree = () => {
        if (isChinaArea) {
            return xAxisData.length > 10 ? 30 : 0;
        }
        return xAxisData.length > 5 ? 15 : 0;
    };
    return (
        <ReactEcharts
            style={{ textAlign: 'left' }}
            option={{
                // color: ['#5B8FF9', '#5AD8A6', '#FF99C3', '#E8684A', '#9270CA', '#5D7092', '#6DC8EC', '#FFA808'],
                legend: {
                    bottom: 10,
                    itemGap: 16,
                    // left: 0,
                    // top: 10,
                    data: allPostRank,
                    textStyle: {
                        color: '#999',
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: 50,
                    containLabel: true
                },
                xAxis: {
                    data: xAxisData,
                    type: 'category',
                    axisTick: { show: false },
                    splitLine: { show: false },
                    splitArea: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(0, 0, 0, 0.45)',
                        interval: 0,
                        rotate: getRotateDegree(),
                        margin: 16
                    }
                },
                yAxis: {
                    minInterval: 1,
                    axisLine: { show: false },
                    // axisLabel: { show: false },
                    axisTick: { show: false }
                    // splitArea: { show: false },
                    // splitLine: { show: false }
                },
                series: allPostRank.map(postRank => ({
                    name: postRank,
                    barWidth: '50%',
                    type: 'bar',
                    stack: 'one',
                    data: allData[postRank]
                }))
            }}
        />
    );
};

export default PortrayalBar;
